<template>
  <div class="about">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>组织管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 搜索与添加角色区 -->
      <el-row :gutter="20">
        <el-col :span="7">
          <el-input
            placeholder="请输入备注名称"
            v-model="queryInfo.roleName"
            clearable
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getUserList"
            ></el-button>
          </el-input>
        </el-col>
      </el-row>
      <!-- <el-row>
        <el-col :span="4"
          ><el-button type="primary" @click="addDialogVisible = true"
            >添加角色</el-button
          ></el-col
        >
      </el-row> -->
      <!-- 角色列表区 -->
      <el-table border stripe :data="userList">
        <el-table-column type="index"> </el-table-column>
         <el-table-column prop="remark" label="角色名称"> </el-table-column>
        <el-table-column prop="roleName" label="备注"> </el-table-column>
        <el-table-column prop="permission" label="权限数量"> </el-table-column>
        <!-- <el-table-column label="操作" width="145px">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="showEditDialog(scope.row.id)"
              >编辑</el-button
            >
            <el-button type="danger" size="mini" @click="removeId(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <!-- 分页效果 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.currentPage"
        :page-sizes="[2, 5, 10, 100]"
        :page-size="queryInfo.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 添加角色信息 -->
      <!-- <el-dialog
        title="添加角色信息"
        :visible.sync="addDialogVisible"
        width="50%"
        @close="addDialogClosed"
      > -->
        <!-- 内容主题区 -->
        <!-- <el-form
          :model="addForm"
          :rules="addFormRules"
          ref="addFormRef"
          label-width="100px"
        >
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="addForm.roleName"></el-input>
          </el-form-item>
          <el-form-item label="权限" prop="permissions">
            <el-input v-model="addForm.permissions"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="addForm.remark"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addBum">确 定</el-button>
        </span>
      </el-dialog> -->
      <!-- 编辑角色信息 -->
      <!-- <el-dialog
        title="修改角色信息"
        :visible.sync="editDialogVisible"
        width="50%"
        @close="editDialogClosed"
      >
        <el-form
          :model="editForm"
          :rules="editForRules"
          ref="editFormRef"
          label-width="90px"
        >
          <el-form-item label="部门名称" prop="roleName">
            <el-input v-model="editForm.roleName"></el-input>
          </el-form-item>
          <el-form-item label="权限数量" prop="permission">
            <el-input v-model="editForm.permission"></el-input>
          </el-form-item>

          <el-form-item label="备注" prop="remark">
            <el-input v-model="editForm.remark"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editInfo">确 定</el-button>
        </span>
      </el-dialog> -->
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryInfo: {
        //查询的数据信息（传值时根据值查询，不传值时查询全部数据）
        roleName: "",
        //当前页（默认为1）
        currentPage: 1,
        //每页的数据条数（默认为4）
        size: 4,
      },
      userList: [],
      total: 0,
      // 添加角色对话框隐藏
      // addDialogVisible: false,
      //添加角色的表单数据
      // addForm: {
      //   roleName: "",
      //   permission: "",
      //   remark: "",
      // },
      //添加角色的表单数据规则

      // addFormRules: {
      //   roleName: [
      //     { required: true, message: "请输入部门名称", trigger: "blur" },
      //     {
      //       min: 1,
      //       max: 20,
      //       message: "部门名称为2~20个字符之间",
      //       trigger: "blur",
      //     },
      //   ],
      //   permissions: [
      //     { required: true, message: "请输入部门名称", trigger: "blur" },
      //     {
      //       min: 1,
      //       max: 20,
      //       message: "部门名称为2~20个字符之间",
      //       trigger: "blur",
      //     },
      //   ],
      //   remark: [
      //     { required: true, message: "请输入部门名称", trigger: "blur" },
      //     {
      //       min: 1,
      //       max: 500,
      //       message: "部门名称为2~20个字符之间",
      //       trigger: "blur",
      //     },
      //   ],
      // },
      //编辑用户信息对话框隐藏
      // editDialogVisible: false,
      //查询到的用户信息对象
      // editForm: {},
      //编辑部门信息规则
      // editForRules: {
      //   roleName: [
      //     { required: true, message: "请输入角色名称", trigger: "blur" },
      //     {
      //       min: 1,
      //       max: 20,
      //       message: "部门名称为2~20个字符之间",
      //       trigger: "blur",
      //     },
      //   ],
      //   permissions: [
      //     { required: true, message: "请输入角色权限数量", trigger: "blur" },
      //     {
      //       min: 1,
      //       max: 20,
      //       message: "部门名称为2~20个字符之间",
      //       trigger: "blur",
      //     },
      //   ],
      //   remark: [
      //     { required: true, message: "请输入角色备注", trigger: "blur" },
      //     {
      //       min: 1,
      //       max: 20,
      //       message: "部门名称为2~20个字符之间",
      //       trigger: "blur",
      //     },
      //   ],
      // },
    };
  },
  created() {
    this.getUserList();
  },
  methods: {
    //获取角色信息
    async getUserList() {
      await this.$http
        .get("organization/roleQuery", {
          params: this.queryInfo,
        })
        .then((res) => {
          console.log(res);
          if (res.data.flag !== true) {
            return this.$message.error("获取角色信息失败!");
          }
          this.userList = res.data.rows;
          this.total = res.data.total;
        });
    },
    //监听信息条数
    handleSizeChange(newSize) {
      // console.log(newSize);
      this.queryInfo.size = newSize;
      this.getUserList();
    },
    //监听页数
    handleCurrentChange(newPage) {
      // console.log(newPage);
      this.queryInfo.currentPage = newPage;
      this.getUserList();
    },
    //监听添加表单的关闭事件
    // addDialogClosed() {
    //   this.$refs.addFormRef.resetFields();
    // },
    //点击按钮添加角色
    // addBum() {
    //   this.$refs.addFormRef.validate(async (valid) => {
    //     if (!valid) return;
    //     //可以发起添加角色的网络请求
    //     const { data: res } = await this.$http.post(
    //       "organization/insertRole",
    //       this.addForm
    //     );
    //     if (res.flag !== true) {
    //       return this.$message.error("添加角色信息失败!");
    //     }
    //     this.$message.success("添加角色信息成功!");
    //     //隐藏添加角色的对话框
    //     this.addDialogVisible = false;
    //     //重新获取角色信息列表数据
    //     this.getUserList();
    //   });
    // },
    // async removeId(id) {
    //   //弹框询问用户是否删除角色
    //   const confirmResult = await this.$confirm(
    //     "此操作将永久删除该角色, 是否继续?",
    //     "删除角色",
    //     {
    //       confirmButtonText: "确定",
    //       cancelButtonText: "取消",
    //       type: "warning",
    //     }
    //   ).catch((err) => err);
    //   if (confirmResult !== "confirm") {
    //     return this.$message.info("已经取消删除！");
    //   }
    //   const { data: res } = await this.$http.post("organization/deleteRole/", {
    //     id: id,
    //   });
    //   console.log(res);

    //   if (res.flag !== true) {
    //     return this.$message.error("删除角色信息失败");
    //   }
    //   this.$message.success("删除角色信息成功");
    //   this.getUserList();
    // },
    //点击按钮编辑角色信息
    // async showEditDialog(id) {
    //   console.log(id);
    //   const { data: res } = await this.$http.get(
    //     "organization/selectRoleById",
    //     { params: { id } }
    //   );
    //   if (res.flag !== true) {
    //     return this.$message.error("获取信息失败!");
    //   }

    //   this.editForm = res.data;
    //   this.editDialogVisible = true;
    // },
    // 监听修改角色对话框的关闭事件
    // editDialogClosed() {
    //   this.$refs.editFormRef.resetFields();
    // },
    //点击确定提交角色修改信息
    // editInfo() {
    //   this.$refs.editFormRef.validate(async (valid) => {
    //     if (!valid) return;
    //     //发起修改角色信息请求
    //     const { data: res } = await this.$http.post("organization/updateRole", {
    //       id: this.editForm.id,
    //       roleName: this.editForm.roleName,
    //       permission: this.editForm.permission,
    //       remark: this.editForm.remark,
    //     });
    //     if (res.flag !== true) {
    //       return this.$message.error("修改角色信息失败");
    //     }
    //     //关闭对话框
    //     this.editDialogVisible = false;
    //     //提示修改信息成功
    //     this.$message.success("修改角色信息成功");
    //     //获取新的角色信息
    //     this.getUserList();
    //   });
    // },
  },
};
</script>

<style></style>
